<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{dataDetail.Title}}</block>
		</cu-custom>

		<view class="bg-top bg-blue">
			<view class="top-box shadow" style="margin-bottom: 10px;padding-top: 0rpx;display: none;">
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;min-height:80rpx">
						<view class="content" style="margin-top: 0rpx;">
							<text class="text-black text-bold">最新巡检记录:</text>
						</view>
						<view class="action" style="margin-top: 0rpx;">
							<!-- bg-green':'bg-red' -->
							<button @click="goLastQrcodeSummary()" :class="dataDetail.LastQrcodeSummary.ProcessStatus==1?'bg-green':dataDetail.LastQrcodeSummary.ProcessStatus==2?'bg-red':'bg-orange'" class="cu-btn round sm shadow margin-left" style="padding: 28rpx;">查  看</button>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;margin-top: 0rpx;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<text class="bxImg cuIcon-newshotfill text-gray"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">计划：{{dataDetail.LastQrcodeSummary.JobName}}</text>
							<text class="text-black"
								style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;margin-top: 0rpx;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<!-- 'text-green cuIcon-roundcheckfill':'text-red cuIcon-roundclosefill' -->
							<text :class="dataDetail.LastQrcodeSummary.ProcessStatus==1?'text-green cuIcon-roundcheckfill':dataDetail.LastQrcodeSummary.ProcessStatus==2?'text-red cuIcon-roundclosefill':'text-orange cuIcon-hotfill'" class="bxImg"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">{{dataDetail.LastQrcodeSummary.ProcessDesc}}</text>
							<text class="text-black"
								style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<text class="cuIcon-timefill text-blue  margin-right-xs"></text>
							<text class="text-black"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">时间：{{dataDetail.LastQrcodeSummary.AddTime}}</text>
							<text class="text-black"
									style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="top-box shadow">
				
				<view class="cu-list menu">

					<view class="cu-item" style="padding: 0;">
						<view class="content" style="display: flex; justify-content: space-around;">
							<text class="cuIcon-messagefill text-blue  margin-right-xs"></text>
							<text class="text-black text-bold"
								style="min-width: 200rpx; max-width: 200rpx; text-align: left;">设备名称:</text>
							<text class="text-black"
								style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.Title}}</text>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;margin-top: 0rpx;min-height:70rpx;border: none !important;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;margin-top: 0px;">
							<text class="bxImg cuIcon-formfill text-blue"></text>
							<text class="text-black text-bold"
								style="min-width: 400rpx; max-width: 600rpx; text-align: left;">设备详情：</text>
							<text class="text-black"
								style="min-width: 290rpx; max-width: 200rpx; text-align: left;"></text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;width:100%;height:auto;overflow: hidden;">
						<rich-text class="rich-text" style="background:#FFF; padding:5rpx;width: 100%;" :nodes="dataDetail.Content"></rich-text> 
						<!-- <rich-text style="background:#FFF; padding:5rpx;width: 100%;" :nodes="dataDetail.Content"></rich-text> -->
					</view>
					
					<view  v-if="dataDetail.LabelArrys.length>0" class="bxBox">
						<text class="cuIcon-btn text-blue  margin-right-xs"></text>
						<view style="min-width: 200rpx; max-width: 200rpx; text-align: left;" class="title text-black text-bold">标签：</view>
					</view>
					<view v-if="dataDetail.LabelArrys.length>0" class='padding-bottom-sm flex flex-wrap bg-white' style="justify-content: flex-end;">
						<view v-for="(item,index) in dataDetail.LabelArrys">
							<view class="margin-right cu-tag bg-green light radius">
								{{item}}
							</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-timefill text-blue  margin-right-xs"></text>
							<text style="min-width: 200rpx; max-width: 200rpx; text-align: left;" class="text-black text-bold">维护时间:</text>
						</view>
						<text class="text-black"
							style="min-width: 380rpx; max-width: 380rpx; text-align: left;">{{dataDetail.AddTime}}</text>
					</view>
				</view>

			</view>

			<!-- 图片信息 -->
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">图片介绍</text>
							<text class="text-ABC text-blue">Pictures</text>
						</view>
					</view>
					<view v-if="dataDetail.IntroductionImageArrys.length < 1" class="padding text-grey">暂无数据</view>
					<view v-if="dataDetail.IntroductionImageArrys.length > 0">
					     <view v-for="(item,index) in dataDetail.IntroductionImageArrys">
							 <view class="cu-item imagesclass" style="padding: 0;">
							 	<view class="content">
							 		<image @click="goPreviewImage(dataDetail.IntroductionImageArrys,'')"  :src="dataDetail.IntroductionImageArrys[index]" class="png cu-avatar sm imagesclassdetail" mode="aspectFit"></image>
							 	</view>
							 </view>
						 </view>
					</view>
				</view>
			</view>

			<view class="center-box shadow" style="margin-bottom: 200rpx;"> 
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">资料文档</text>
							<text class="text-ABC text-blue">Files</text>
						</view>
					</view>
					<view v-if="dataDetail.FilesArrys.length < 1" class="padding text-center text-grey">暂无数据</view>
					<view  v-for="(item,index) in dataDetail.FilesArrys">
						<view class="cu-item" style="padding: 0;margin-bottom: 10rpx;">
							<view class="content" style="float: left;width: 80%;overflow: hidden;height: 40px;line-height: 40px;">
								<text class="text-lg">{{item.split('/')[item.split('/').length-1]}}</text>
							</view>
							<view class="action"  style="float: left;width: 20%;height: 40px;line-height: 40px;">
								<button @click="openDocument(item)" class="cu-btn round sm shadow bg-green" style="padding: 28rpx;width: 100%;">查看</button>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加入按钮 -->
			<!-- <view class="padding-lr flex margin-top-sm" style="justify-content: space-between;margin-bottom: 40px;">
				<button @click="goHandle()" class="cu-btn bg-blue margin-top-sm lg" style="width: 100%;">巡  检</button>
			</view> -->
			<view class="publish-goods-wrap">
				<view  @click="goHandle" class="publish-goods-btn-left"> 日常维保({{noJob==1?'计划外':'计划内'}})</view>
				<view @click="addScene"  class="publish-goods-btn-right" >维保工单</view>
			</view>
			<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;height: 60rpx;">
			</view>
		</view>
	</view>
	
</template>

<script>
import request from '@/common/request.js';
	export default {
		data() {
			return {
				secondGo:'',
				params:{},
				savingRequestData:{
					qrcodeId:'',
					jobId:'',
					longitude:'',
					latitude:'',
					isCheckDevice:false,
				},
				reSavingRequestData:{
					signId:'',
					longitude:'',
					latitude:''
				},
				dataDetail:{
					Id:0,
					Title:'',
					Content:'',
					SubTitle:'',
					Company:'',
					AddTime:'',
					LastQrcodeSummary:{
						ProcessStatus:1
					},
					IntroductionImage:'',
					IntroductionImageArrys:[],
					Label:'',
					LabelArrys:'',
					Files:'',
					FilesArrys:[]
				},
				noJob:0,
			}
		},
		onShow() {
			
		},
		onLoad(option) {
			this.savingRequestData.qrcodeId=option.qrcodeid
			this.secondGo=option.secondGo
			this.noJob=option.noJob
			this.getQrcodeSceneDetail(option.qrcodeid)
		},
		onReachBottom() {

		},
		onShareAppMessage() {
			return {
				title: '分享'
			}
		},
		methods: {
			goLastQrcodeSummary(){
				//跳转页面
				//去设备详情页
				uni.navigateTo({
					url: '/pages/qrcode/qrcodejob/lastlogs?qrcodeid='+this.savingRequestData.qrcodeId
				})
			},
			addScene(){
				let that=this
				console.log(that.savingRequestData.qrcodeId)
				uni.navigateTo({
					url: '/pages/qrcode/scene/add/add?qrcodeid='+that.savingRequestData.qrcodeId
				})
			},
			openDocument(url){
				uni.showLoading({
					title: '下载中...'
				})
				uni.downloadFile({
					url: this.$request22.baseUrl1+url,
					success: function(res) {
						uni.hideLoading();
						uni.showLoading({
							title: '打开中...'
						})
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								uni.hideLoading();
							},fail() {
								uni.hideLoading();
								uni.showToast({ title: '文件打开失败', image: '/static/cha.png',duration:3000  });
							}
						});
					},fail() {
						uni.hideLoading();
						uni.showToast({ title: '文件下载失败', image: '/static/cha.png',duration:3000 });
					}
				})
			},
			goPreviewImage(url,baseurl){
				let urls=[]
				for(let i=0;i<url.length;i++){
					urls.push(baseurl+url[i])
				}
				uni.previewImage({
					current:0,
					urls:urls
				});
			},
			getQrcodeSceneDetail(qrcode_id) {
				uni.showLoading({
					title: '加载中'
				})
				var that = this;
				let opts = {
					url: 'api/GetQrcodeIntroduce',
					method: 'get'
				};
				that.params.qrcode_id=qrcode_id;
				request.httpTokenRequest(opts,that.params).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						that.dataDetail=res.data.data;
						that.dataDetail.baseUrl=this.$request22.baseUrl1
						uni.hideLoading();
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			goHandle(){
				let that=this
				if(that.noJob==1){
					that.qrcodeClickNoJob()
				}else{
					that.qrcodeClick();
				}
			},
			qrcodeClickNoJob() {
				uni.showLoading({
					title: '提交中'
				})
				let that = this;
				let opts = {
					url: 'api/SavingQrcodeDirect',
					method: 'get'
				};
				//获取点位详情
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:true,
					success(res3) {
						that.savingRequestData.latitude = res3.latitude;
						that.savingRequestData.longitude = res3.longitude;
						request.httpTokenRequest(opts,that.savingRequestData).then(res => {
							if(res.data.code == 1){
								uni.hideLoading();
								if(res.data.data.firstGo=='goTopic'){
									//去答题
									uni.navigateTo({
										url: '/pages/qrcode/qrcodejob/topic?qrcodeid='+that.savingRequestData.qrcodeId+'&signid='+res.data.msg+'&noJob='+that.noJob
									})
								}else if(res.data.data.firstGo=='goPhone'){
									//去拍照1
									uni.navigateTo({
										url: '/pages/qrcode/qrcodejob/photo?qrcodeid='+that.savingRequestData.qrcodeId+'&signid='+res.data.msg
									})
								}else if(res.data.data.firstGo=='goDeviceDeatil'){
									//去设备详情页
									uni.navigateTo({
										url: '/pages/qrcode/qrcodejob/device?qrcodeid='+that.savingRequestData.qrcodeId+'&secondGo='+res.data.data.secondGo
									})
								}else{
									//直接结束
									if(that.isAlert){
										that.showScanSucess='ok'
										that.getTime();
									}else{
										uni.showToast({ title: '签到成功', icon: '/static/success.png' });
										uni.getStorage({
											key: 'PageCur',
											success: function (respage) {
												setTimeout(() => {
													 uni.reLaunch({
														url: '/pages/index/tabbar?PageCur='+respage.data
													 });
												}, 0)
											},fail() {
												setTimeout(() => {
													 uni.reLaunch({
													 	url: '/pages/index/tabbar?PageCur=search'
													 });
												}, 0)
											}
										});
									}
									
								}
							}
							else{
								uni.hideLoading();
								uni.showToast({ title: res.data.msg, icon: 'none' });
							}
						});
					},
					fail: function () {
						uni.hideLoading();
						uni.showToast({
							title: '定位失败，请退出登陆重新开启定位',
							icon:'none',
							duration: 4000
						});
					}
				});
			},
			qrcodeClick(){
				let that=this
				uni.showLoading({title: '加载中'})
				
				uni.getStorage({
					key: 'JobId',
					success: function (res1) {
						that.savingRequestData.jobId=res1.data.id;
						let opts = {
							url: 'api/SavingQrcode',
							method: 'get'
						};
						uni.getLocation({
							type: 'gcj02',
							isHighAccuracy:true,
							success(res3) {
								that.savingRequestData.latitude = res3.latitude;
								that.savingRequestData.longitude = res3.longitude;
								request.httpTokenRequest(opts,that.savingRequestData).then(res => {
									if(res.data.code == 1){
										uni.hideLoading();
										if(res.data.data.firstGo=='goTopic'){
											console.log(res.data.msg)
											//去答题
											uni.navigateTo({
												url: '/pages/qrcode/qrcodejob/topic?qrcodeid='+that.savingRequestData.qrcodeId+'&signid='+res.data.msg
											})
										}else if(res.data.data.firstGo=='goPhone'){
											console.log(res.data.msg)
											//去拍照1
											uni.navigateTo({
												url: '/pages/qrcode/qrcodejob/photo?qrcodeid='+that.savingRequestData.qrcodeId+'&signid='+res.data.msg
											})
										}else{
											//直接结束
											uni.showToast({ title: '签到成功', icon: '/static/success.png' });
											uni.getStorage({
												key: 'PageCur',
												success: function (respage) {
													setTimeout(() => {
														 uni.reLaunch({
															url: '/pages/index/tabbar?PageCur='+respage.data
														 });
													}, 0)
												},fail() {
													setTimeout(() => {
														 uni.reLaunch({
														 	url: '/pages/index/tabbar?PageCur=search'
														 });
													}, 0)
												}
											});
										}
									}
									else{
										uni.hideLoading();
										if(res.data.code == 399){
											//当前点位已签到，是否重新巡检
											uni.showModal({
												title: '重复巡检',
												content: '是否继续巡检覆盖原有数据',
												success: function (resconfirm) {
													if (resconfirm.confirm) {
														uni.showLoading({
															title: '提交中'
														})
														//调用接口
														let opts = {
															url: 'api/ReSavingQrcode',
															method: 'get'
														};
														that.reSavingRequestData.signId=res.data.msg
														that.reSavingRequestData.latitude = res3.latitude;
														that.reSavingRequestData.longitude = res3.longitude;
														request.httpTokenRequest(opts,that.reSavingRequestData).then(resre => {
															uni.hideLoading();
															if(resre.data.code == 1){
																if(resre.data.data.firstGo=='goTopic'){
																	//去答题
																	uni.navigateTo({
																		url: '/pages/qrcode/qrcodejob/topic?qrcodeid='+that.savingRequestData.qrcodeId+'&signid='+res.data.msg
																	})
																}else if(resre.data.data.firstGo=='goPhone'){
																	//去拍照1
																	uni.navigateTo({
																		url: '/pages/qrcode/qrcodejob/photo?qrcodeid='+that.savingRequestData.qrcodeId+'&signid='+res.data.msg
																	})
																}else if(resre.data.data.firstGo=='goDeviceDeatil'){
																	//去设备详情页
																	uni.navigateTo({
																		url: '/pages/qrcode/qrcodejob/device?qrcodeid='+qrcodeId+'&secondGo='+res.data.data.secondGo
																	})
																}else{
																	//直接结束
																	uni.showToast({ title: '签到成功', icon: '/static/success.png' });
																	uni.getStorage({
																		key: 'PageCur',
																		success: function (respage) {
																			setTimeout(() => {
																				 uni.reLaunch({
																					url: '/pages/index/tabbar?PageCur='+respage.data
																				 });
																			}, 0)
																		},fail() {
																			setTimeout(() => {
																				 uni.reLaunch({
																				 	url: '/pages/index/tabbar?PageCur=search'
																				 });
																			}, 0)
																		}
																	});
																}
															}
															else{
																uni.showToast({ title: resre.data.msg, icon: 'none' });
															}
														});
													}
												}
											});
										}else{
											uni.showToast({ title: res.data.msg, icon: 'none' ,duration: 4000});
										}
									}
								});
							},
							fail: function () {
								uni.hideLoading();
								uni.showToast({
									title: '定位失败，请退出登陆重新开启定位',
									icon:'none',
									duration: 4000
								});
							}
						});
						},fail() {
						uni.hideLoading();
						uni.showToast({
							title: '请选择巡检计划',
							icon:'none',
							duration: 4000
						});
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.rich-text img{
		background-size:contain;
		width:90%;
		height: auto;
		margin: 0 auto;
		display: block;
	}
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border:none !important;
	}
	.uni-video{
		width: 100% !important;
	}
	.container {
		width: 750rpx;
		color: #333333;
		.imagesclass{
			width:33%;
			float:left;
			.imagesclassdetail{
				width: 100px !important;
				height: 100px !important;
				margin-right: 20px;
			}
		}
		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
	.publish-goods-wrap {
			background: rgba(255, 255, 255, .5);
			padding: 24rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}
	
		.publish-goods-btn-left {
			width: 44%;
			margin: 12rpx;
			background: #0079FE;
			color: #FFFFFF;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
			float: left;
		}
		.publish-goods-btn-right {
			width: 44%;
			margin: 12rpx;
			background: #e54d42;
			color: #FFFFFF;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
			float: right;
		}
	
		.goods-empty-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40%;
		}
</style>